<template>
  <div class="Comic-content">
    <div class="head" v-show="!flag">
      <div class="ift-back" @click="returns"></div>
      <h1>
        <span>{{ index }}</span
        >{{ name }}
      </h1>
      <div>
        <span @click="homs">首页</span>
        <i class="ift-read-share" @click="urlList"></i>
      </div>
    </div>
    <div @click="flas">
      <img v-for="(item, index) in imageList" :key="index" :src="item" alt="" />
    </div>
    <ul class="bottm" v-show="!flag">
      <li @click="PreviousChapter">
        <p class="ift-chapter-prev"></p>
        上一章
      </li>
      <li @click="day">
        <p class="ift-light" v-show="night"></p>
        <p class="ift-moon" v-show="!night"></p>
        {{ night == false ? "夜间" : "白天" }}
      </li>
      <li @click="catalogue">
        <p class="ift-read-list"></p>
        目录
      </li>
      <li @click="NextChapter">
        <p class="ift-chapter-next"></p>
        下一章
      </li>
    </ul>
    <div class="ogue" v-if="catal">
      <h1 class="details">章节详情</h1>
      <ul class="catal">
        <li
          v-for="(item, index) in subtitleData"
          :key="index"
          @click="Content(item.id)"
        >
          <p>{{ item.sub }}</p>
        </li>
      </ul>
    </div>
    <div class="day" v-show="!night" @click="flas"></div>
  </div>
</template>
<script>
import { Toast } from "vant";
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      urls: "",
      index: 1,
      value: 0,
      flag: true,
      imageList: [],
      Data: [],
      catal: false,
      night: true,
      id: 0,
      subtitleData: "",
    };
  },
  methods: {
    day() {
      this.night = !this.night;
    },
    Content(id) {
      this.id = id;
      axios.get("http.json").then((res) => {
        let ids = this.$store.state.ids;
        let asd = res.data.name;
        asd.forEach((item) => {
          if (item.id == ids) {
            this.Data = item;
          }
        });
        this.imageList = this.subtitle.data[this.id].imageList;
        this.index = this.subtitle.data[this.id].sub;
        this.name = this.subtitle.data[this.id].name;
      });
    },
    catalogue() {
      this.catal = !this.catal;
      this.flag = !this.flag;
    },
    urlList() {
      Toast("链接已经复制");
      console.log("http://localhost:8080" + this.$route.path);
    },
    PreviousChapter() {
      if (this.id <= 0) {
        this.id = 0;
        Toast("已经是第一章了");
        return;
      }
      this.id -= 1;
      axios.get("http.json").then((res) => {
        let ids = this.$store.state.ids;
        let asd = res.data.name;
        asd.forEach((item) => {
          if (item.id == ids) {
            this.Data = item;
          }
        });
        this.imageList = this.subtitle.data[this.id].imageList;
        this.index = this.subtitle.data[this.id].sub;
        this.name = this.subtitle.data[this.id].name;
      });
    },
    NextChapter() {
      if (this.id >= this.subtitle.data.length - 1) {
        Toast("已经是最后一章了");
        return;
      }
      this.id++;
      axios.get("http.json").then((res) => {
        let ids = this.$store.state.ids;
        let asd = res.data.name;
        asd.forEach((item) => {
          if (item.id == ids) {
            this.subtitle = item;
          }
        });
        this.imageList = this.subtitle.data[this.id].imageList;
        this.index = this.subtitle.data[this.id].sub;
        this.name = this.subtitle.data[this.id].name;
      });
    },
    flas() {
      this.flag = !this.flag;
      this.catal = false;
    },
    returns() {
      let id = this.$store.state.ids;
      this.$router.push({ name: "details", query: { id: id } });
    },
    homs() {
      this.$router.push("/homePage");
    },
  },
  created() {
    this.id = this.$route.query.id;
    let ids = this.$store.state.ids;
    axios.get("http.json").then((res) => {
      let asd = res.data.name;
      asd.forEach((item) => {
        if (item.id == ids) {
          this.subtitle = item;
        }
      });
      console.log(this.subtitle.data);
      this.subtitleData = this.subtitle.data;
      this.imageList = this.subtitle.data[this.id].imageList;
      this.index = this.subtitle.data[this.id].sub;
      this.name = this.subtitle.data[this.id].name;
    });
  },
};
</script>
<style lang="less">
.Comic-content {
  img {
    width: 100%;
  }
  .head {
    width: 96%;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    padding: 0 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 99;
    .cancel {
      font-size: 14px;
    }
    div {
      width: 45px;
      height: 45px;
      font-size: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      &:nth-child(3) {
        width: 22%;
        span {
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          border: 1px solid white;
          border-radius: 7px;
          padding: 0px 7px;
        }
        i {
          font-size: 24px;
        }
      }
    }
    h1 {
      margin-right: 2%;
      flex: 1;
      font-size: 14px;
      font-weight: 300;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        margin: 0 1%;
      }
    }
  }
  .bottm {
    width: 96%;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    bottom: 0;
    padding: 0 2%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    z-index: 99;
    li {
      text-align: center;
      font-size: 14px;
      p {
        font-size: 30px;
        margin: 0;
      }
    }
  }
  .Next-chapter {
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    bottom: 70px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    div {
      font-size: 40px;
      width: 10%;
    }
    .progressbar {
      width: 60%;
    }
  }
  .ogue {
    width: 100%;
    height: 30%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    bottom: 0;
    overflow: scroll;
    z-index: 99;
    .details {
      height: 20px;
      font-size: 16px;
      color: white;
      font-weight: 400;
      margin: 10px 5% 0;
    }
    .catal {
      width: 90%;
      height: 100%;
      margin: 5%;
      color: white;
      text-align: center;
      li {
        float: left;
        width: 23%;
        margin-right: 2%;
        margin-bottom: 3%;
        &:nth-child(4n) {
          margin-right: 0;
        }
        p {
          font-size: 14px;
          border: 1px solid white;
          margin: 0 auto;
          border-radius: 10px;
        }
      }
    }
  }
  .day {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    z-index: 10;
  }
}
</style>